<template>
	<div class = "wrapper">
		<swiper :options="swiperOption">
		    <swiper-slide v-for = "(item,index) of pages" :key = "index">
		    	<div class = "icon" v-for = "value of item" :key = "value.id">
		    		<img :src="value.imgUrl" :alt="value.title">
		    		<p>{{value.desc}}</p>
		    	</div>
		    </swiper-slide> 
		    <div class="swiper-pagination"  slot="pagination"></div>
	  	</swiper>
	</div>
</template>

<script>
	export default {
		name:'homeIcons',
		props:["iconsList"],
		data () {
			return {
				swiperOption :{
					pagination:".swiper-pagination",
				},
			}
		},
		computed:{
			pages () {
				let pages = [];
				this.iconsList.forEach((item,index) => {
					let pageNum = Math.floor(index/8);
					if(!pages[pageNum]){
						pages[pageNum] = [];
					}
					pages[pageNum].push(item)
				})
				return pages;
			} 
		}
	}
</script>

<style lang = "less" scoped>
	@import '~css/variable.less';

	.wrapper /deep/ .swiper-pagination-bullet-active {
		background: @bgColor;
	}

	.wrapper /deep/ .swiper-pagination-bullet {
		width:5px;
		height:5px;
		margin:3px;
	}

	.wrapper {
		width:100%;
		height:0;
		padding-bottom:50%;
		overflow: hidden;

		.icon {
			width:25%;
			float:left;
			padding-bottom:25%;
			position: relative;
			img {
				width:65%;
				position: absolute;
				top:.1rem;
				left:50%;
				transform:translateX(-50%);
			}
			p {
				position: absolute;
				bottom:.18rem;
				left:50%;
				transform:translateX(-50%);
				white-space: nowrap;
				color:#333;
				font-size:.24rem;
			}
		}
		.swiper-pagination {
			bottom:-5px;
		}
	}
</style>